<template>
  <div class="box-tie">
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="user_id" label="用户ID"> </el-table-column>
      <el-table-column prop="classification_id" label="分类"> </el-table-column>
      <el-table-column prop="id" label="帖子ID"> </el-table-column>
      <el-table-column prop="create_time" label="创建时间"> </el-table-column>
      <el-table-column prop="star_count" label="点赞数量"> </el-table-column>
      <el-table-column prop="comment_count" label="评论数量"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <div>
            <el-button size="mini">编辑</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </div> -->

          <span style="color: #fa7d3c" @click="bianji(scope.row)">编辑</span>
          <span style="color: red; margin-left: 10px" @click="delet(scope.row)"
            >删除</span
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="fenye">
      <el-pagination
        @current-change="handlepage"
        :current-page.sync="allList.page"
        :page-size="allList.limit"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
      <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form label-width="70px">
          <el-form-item label="更改标题">
            <el-input v-model="info.title" placeholder="请输入类名" />
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input
              v-model="info.user_id"
              placeholder="请输入用户id"
              disabled
            />
          </el-form-item>
          <el-form-item label="更改类型">
            <el-input
              v-model="info.classification_id"
              placeholder="请输入类型"
            />
          </el-form-item>
          <el-form-item label="帖子ID">
            <el-input v-model="info.id" placeholder="请输入id" disabled />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose"
    >
      <span>是否删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="deleKist">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage1: 1,
      loading: true,
      dialogVisible: false,
      dialogVisible1: false,
      total: 1,
      info: {
        title: "",
        content: "",
        user_id: 0,
        classification_id: 0,
        id: 0,
        create_time: "",
        star_count: 0,
        comment_count: 0,
      },

      tableData: [
        // {
        //   title: "我是内容",
        //   content: "我是内容我是内内我是荣荣荣",
        //   user_id: "1",
        //   classification_id: "2",
        //   id: "1",
        //   create_time: "2021-06-03 18:34:00",
        //   star_count: "1",
        //   comment_count: "4",
        // },
        // {
        //   title: "我是内容",
        //   content: "我是内容我是内内我是荣荣荣",
        //   user_id: "1",
        //   classification_id: "2",
        //   id: "1",
        //   create_time: "2021-06-03 18:34:00",
        //   star_count: "1",
        //   comment_count: "4",
        // },
        // {
        //   title: "我是内容",
        //   content: "我是内容我是内内我是荣荣荣",
        //   user_id: "1",
        //   classification_id: "2",
        //   id: "1",
        //   create_time: "2021-06-03 18:34:00",
        //   star_count: "1",
        //   comment_count: "4",
        // },
        // {
        //   title: "我是内容",
        //   content: "我是内容我是内内我是荣荣荣",
        //   user_id: "1",
        //   classification_id: "2",
        //   id: "1",
        //   create_time: "2021-06-03 18:34:00",
        //   star_count: "1",
        //   comment_count: "4",
        // },
      ],
      allList: {
        page: 1,
        limit: 10,
      },
      id: {
        article_id: 0,
      },
      article_id: 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    deleKist() {
      this.$axios
        .post("/admin/updateArticle/", {
          article_id: this.article_id,
        })
        .then((res) => {
          console.log(res);
          this.$message.success("删除成功");
          this.dialogVisible1 = !this.dialogVisible1;
          this.getList();
        })
        .catch((res) => {
          this.$message.error(res.response.data.message);
          this.loading = false;
        });
    },
    delet(v) {
      console.log(v);
      this.article_id = v.id;
      this.article_id = v.id;
      this.dialogVisible1 = true;
    },
    edit() {
      let parpams = {
        title: this.info.title,
        content: this.info.content,
        user_id: this.info.user_id,
        classification_id: this.info.classification_id,
        id: this.info.id,
        create_time: this.info.create_time,
        update_time: this.info.update_time,
      };
      this.$axios.put("/admin/updateArticle/", parpams).then((res) => {
        console.log(res);
        if (res.status === 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("修改失败");
        }
        this.dialogVisible = false;
      });
    },
    handlepage() {
      this.loading = true;
      this.getList();
    },
    getList() {
      this.$axios
        .get("/article/list/all/", { params: this.allList })
        .then((res) => {
          console.log(res);
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.loading = false;
        })
        .catch((res) => {
          this.$message.error(res.response.data.message);
          this.loading = false;
        });
    },
    handleClose(done) {
      //   console.log(done);
      this.dialogVisible = false;
      this.dialogVisible1 = false;
    },
    bianji(v) {
      this.dialogVisible = true;
      console.log(v);
      this.info = v;
    },
  },
};
</script>
<style lang="scss" scoped>
.box-tie {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .fenye {
    margin: 0 auto;
    width: 60%;
    margin-top: 10px;
  }
}
</style>